<!-- 收藏公共组件 -->
<template>
    <el-button class="cp-coll-btn" type="text" :disabled="loading" @click="handleClick">
        <slot :data="isColl">
            {{isColl ? '取消' : '收藏'}}
        </slot>
    </el-button>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Prop,
    Component
} from 'nuxt-property-decorator'
import {
    State
} from 'vuex-class'
import {ciipWebUrl} from '~/../config/server.url.conf'
import {setCollection, validateCollection} from '~/api'
import ValidateLoginConfirm from '~/method/confirm'

@Component({
    name: 'collection'
})
export default class ShopHeader extends Vue {
    // 收藏店铺类型
    @Prop({
        type: String,
        default: 'SUPPLY'
    })
    shopType!: string
    // 收藏类型
    @Prop({
        type: String,
        default: 'SUPPLY_SERVICE'
    })
    collectionType!: string
    // 分类（需求和服务）
    @Prop()
    classId!: string | number
    // 目标源数据id
    @Prop()
    collectionSourceId!: string | number
    loading: boolean = false
    isColl: boolean = false
    ciipWebUrl: string = ciipWebUrl
    collParams: any = {
        classId: '',
        collectionUserId: '',
        collectionSourceId: '',
        operateType: '',
        collectionType: this.collectionType,
        shopType: this.shopType
    }
    vdCollParams: any = {
        userId: '',
        id: '',
        collectionType: this.collectionType,
        shopType: this.shopType
    }
    @Watch('collectionSourceId', {immediate: true, deep: true})
    initCollectionSourceId (nv: string | number) {
        this.collParams.collectionSourceId = nv
        this.vdCollParams.id = nv
        this.validateCollection()
    }
    @Watch('classId', {immediate: true, deep: true})
    initClassId (nv: string | number) {
        if (nv) {
            this.collParams.classId = nv
        }
    }
    @Watch('$store.state.userNum', {immediate: true, deep: true})
    async init (nv: number) {
        if (nv > 0 && this.haslogin) {
            const uid = this.$store.state.userinfo.id
            this.collParams.collectionUserId = uid
            this.vdCollParams.userId = uid
            await this.validateCollection()
        }
    }
    async setCollection () {
        const params = {...this.collParams}
        params.operateType = this.isColl ? 'del' : 'add'
        this.loading = true
        const {data}: any = await setCollection(params)
        if (data.flag) {
            this.isColl = !this.isColl
        }
        this.loading = false
        this.$message({
            type: data.flag ? 'success' : 'error',
            message: data.msg
        })
    }
    async validateCollection () {
        const params = {...this.vdCollParams}
        if (params.id && params.userId) {
            const {data}: any = await validateCollection(params)
            if (data.flag) {
                this.isColl = !!data.data
            }
        }
    }
    handleClick () {
        if (!this.haslogin) {
            this.validateLoginConfirm()
        } else {
            this.setCollection()
        }
    }
    validateLoginConfirm () {
        const confirm = new ValidateLoginConfirm({that: this})
        confirm.validateLoginConfirmForParams(
            '您尚未登录，登录即可收藏！',
            '立即登录',
            this.ciipWebUrl + '/login?redirectUrl=' + window.location.href
        )
    }
    @State haslogin: any
    @State shopInfo: any
}
</script>

<style lang="scss">
    .cp-coll-btn{
        &.el-button{
            padding: 0;
        }
    }
</style>
